<template>
  <view>
    <view class="addcontent">
      <view class="flexbetween flexrow">
        <view>患者姓名</view>
        <view>
          <input type="text" v-model="Patientquery.name" placeholder="请输入患者姓名" />
        </view>
      </view>
      <view class="flexbetween flexrow">
        <view>身份证号</view>
        <view>
          <input type="idcard" maxlength="18" v-model="Patientquery.idCardNumber" @blur="IDcardblur"
            placeholder="请输入身份证号" />
        </view>
      </view>
      <!-- <view @click="show = true" class="flexbetween flexrow">
				<view>来源医院</view>
				<view>
					<input
						maxlength="18"
						disabled
						v-model="Patientquery.sourceHospital"
						placeholder="请选择来源医院"
					/>
				</view>
			</view> -->
      <view class="flexbetween flexrow">
        <view>性别</view>
        <view>
          <input type="text" disabled v-model="sex" placeholder="自动代入" />
        </view>
        <!-- <view class="sexdown">
					<picker range-key="" :range="sexarray" mode="selector" @change="sexchoose">
						<view>
							{{ sex }}
							<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/down.png" mode=""></image>
						</view>
					</picker>
				</view> -->
      </view>
      <view class="flexbetween flexrow">
        <view>出生时间</view>
        <!-- <view class="sexdown">
					<picker
						mode="date"
						:value="Patientquery.birthday"
						:start="startDate"
						:end="endDate"
						@change="bindDateChange"
					>
						<view class="uni-input">{{ Patientquery.birthday ||'请选择'}}</view>
					</picker>
				</view> -->
        <view>
          <input type="text" disabled v-model="Patientquery.birthday" placeholder="自动代入" />
        </view>
      </view>
      <!-- <view class="flexbetween flexrow">
				<view>所在区域</view>
				<view class="sexdown">
					<pickers @address="chooseaddress" :defaultAddress="defaultAddress">
						<view>
							{{ orderquery.province }}-{{ orderquery.city }}-{{
								orderquery.county
							}}
						</view>
					</pickers>
				</view>
			</view> -->
      <view class="flexbetween flexrow">
        <view>定位</view>
        <view class="mapdown" @click="getMap">
          <!-- {{address_name||'请定位所在地'}} -->
          {{ Patientquery.longitude | toTwo }}
          <template v-if="Patientquery.longitude">,</template>
          {{ Patientquery.latitude | toTwo }}
          <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/map.png" mode=""></image>
        </view>
      </view>

      <view class="des-box">
        <view class="word">详细地址</view>
        <view>
          <!-- <input type="text" v-model="Diseasequery.examine" placeholder="请输入"> -->
          <u--textarea v-model="Patientquery.address" placeholder="请填写详细地址"></u--textarea>
        </view>
      </view>
      <view class="flexbetween flexrow">
        <view>联系电话</view>
        <view>
          <input type="number" maxlength="11" v-model="Patientquery.phone" placeholder="请输入联系电话" />
        </view>
      </view>

      <!-- <view class="flexbetween flexrow">
				<view>身高(cm)</view>
				<view>
					<input
						type="number"
						v-model="Patientquery.height"
						placeholder="输入身高"
					/>
				</view>
			</view> -->
      <!-- <view class="flexbetween flexrow">
				<view>体重(kg)</view>
				<view>
					<input
						type="number"
						v-model="Patientquery.weight"
						placeholder="输入体重"
					/>
				</view>
			</view> -->
      <view :class="Patientquery.ifAllergy == 2 ? 'allergy allergypadding' : 'allergy'
        ">
        <view class="flexbetween flexrow">
          <view>有无过敏史</view>
          <view :class="Patientquery.ifAllergy == 2
            ? 'allergy-right '
            : 'allergy-right allergylheight'
            ">
            <view class="chooseimg" @click="PasthistoryhaveClick(1)">
              <template v-if="Patientquery.ifAllergy == 2">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
              </template>
              <template v-if="Patientquery.ifAllergy == 1">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode="">
                </image>
              </template>
              有
            </view>
            <view class="chooseimg" @click="PasthistoryhaveClick(1)">
              <template v-if="Patientquery.ifAllergy == 1">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
              </template>
              <template v-if="Patientquery.ifAllergy == 2">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode="">
                </image>
              </template>
              无
            </view>
          </view>
        </view>
        <view v-if="Patientquery.ifAllergy == 2" class="allergy-bot">
          <input type="text" v-model="Patientquery.allergy" placeholder="请描述过敏的药物" />
        </view>
      </view>
      <!-- <view
				:class="Patientquery.ifPast == 2 ? 'allergy allergypadding' : 'allergy'"
			>
				<view class="flexbetween flexrow">
					<view>有无既往史</view>
					<view
						:class="
							Patientquery.ifPast == 2
								? 'allergy-right '
								: 'allergy-right allergylheight'
						"
					>
						<view class="chooseimg" @click="PasthistoryhaveClick(2)">
							<template v-if="Patientquery.ifPast == 2">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
							</template>
							<template v-if="Patientquery.ifPast == 1">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image>
							</template>
							有
						</view>
						<view class="chooseimg" @click="PasthistoryhaveClick(2)">
							<template v-if="Patientquery.ifPast == 1">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
							</template>
							<template v-if="Patientquery.ifPast == 2">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image>
							</template>
							无
						</view>
					</view>
				</view>
				<view v-if="Patientquery.ifPast == 2" class="allergy-bot">
					<input
						type="text"
						v-model="Patientquery.past"
						placeholder="请描述既往史"
					/>
				</view>
			</view> -->
      <!-- <view
				:class="
					Patientquery.ifSurgery == 2 ? 'allergy allergypadding' : 'allergy'
				"
			>
				<view class="flexbetween flexrow">
					<view>有无手术史</view>
					<view
						:class="
							Patientquery.ifSurgery == 2
								? 'allergy-right '
								: 'allergy-right allergylheight'
						"
					>
						<view class="chooseimg" @click="PasthistoryhaveClick(3)">
							<template v-if="Patientquery.ifSurgery == 2">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
							</template>
							<template v-if="Patientquery.ifSurgery == 1">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image>
							</template>
							有
						</view>
						<view class="chooseimg" @click="PasthistoryhaveClick(3)">
							<template v-if="Patientquery.ifSurgery == 1">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
							</template>
							<template v-if="Patientquery.ifSurgery == 2">
								<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image>
							</template>
							无
						</view>
					</view>
				</view>
				<view v-if="Patientquery.ifSurgery == 2" class="allergy-bot">
					<input
						type="text"
						v-model="Patientquery.surgery"
						placeholder="请描述手术史"
					/>
				</view>
			</view> -->
      <!-- <view class="flexbetween flexrow history" >
				<view>有无既往史</view>
				<view class="history-right">
					<view class="chooseimg" @click="PasthistoryhaveClick(2)">
						<template v-if="Patientquery.ifPast==2">
							<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
						</template>
						<template v-if="Patientquery.ifPast==1"><image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image></template>
						有
					</view>
					<view class="chooseimg" @click="PasthistoryhaveClick(2)">
						<template v-if="Patientquery.ifPast==1">
							<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
						</template>
						<template v-if="Patientquery.ifPast==2"><image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image></template>
						无
					</view>
				</view>
				<view  v-if="Patientquery.ifPast==2" class="allergy-bot">
					<input type="text" v-model="Patientquery.allergy" placeholder="请描述既往史" />
				</view>
			</view> -->
      <!-- <view class="flexbetween flexrow history">
				<view>有无手术史</view>
				<view class="history-right">
					<view class="chooseimg" @click="PasthistoryhaveClick(3)">
						<template v-if="Patientquery.ifSurgery==2">
							<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
						</template>
						<template  v-if="Patientquery.ifSurgery==1"><image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image></template>
						有
					</view>
					<view class="chooseimg" @click="PasthistoryhaveClick(3)">
						<template  v-if="Patientquery.ifSurgery==1">
							<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/have.png" mode=""></image>
						</template>
						<template v-if="Patientquery.ifSurgery==2"><image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/nohave.png" mode=""></image></template>
						无
					</view>
				</view>
			</view> -->
    </view>
    <view class="mybtn">
      <my-button borderRadius="8" height="96" width="670" hoverClass="none" @click="Hometreatment" :disable="btndisable"
        :background="btndisable ? '#999' : ''">
        保存并选择
      </my-button>
    </view>
    <view class="mybtn">
      <my-button border borderRadius="8" height="96" width="670" hoverClass="none" @click="patientcancel">
        取消
      </my-button>
    </view>

    <!-- 弹出选项 -->
    <u-picker v-if="show" title="请选择来源医院" :show="show" @cancel="cancel" @confirm="confirm"
      :columns="columns"></u-picker>
  </view>
</template>

<script>
// import pickers from "../../../component/ming-picker/ming-picker.vue";
import {
  addPatient,
  updatePatient,
  getOnePatient,
  getAllHospital,
} from "../../../api/index.js";
import {
  idCardReg,
  mobileReg
} from "@/utils/reg.js";
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
  components: {
    // pickers,
    MyButton
  },
  data() {
    //当前时间
    const currentDate = this.getDate({
      format: true,
    });
    return {
      show: false,
      sexarray: ["男", "女"],
      columns: [
        ["中国", "美国"]
      ],
      sex: "",
      defaultAddress: [],
      orderquery: {
        province: "省",
        city: "市",
        county: "区",
      },
      historyshow: false,
      allergyshow: false,
      Pasthistoryshow: false,
      address_name: "",
      Patientquery: {
        name: "", //	必选	String	患者姓名
        idCardNumber: "", //	必选	String	身份证号码
        gender: "", //	必选	Integer	性别1:男2:女3:其他
        birthday: "", //	必选	String	生日
        area: "", //	必选	String	区域
        address: "", //	必选	String	地址
        longitude: "", //	必选	String	经度
        latitude: "", //	必选	String	纬度
        phone: "", //	必选	String	联系电话
        height: "", //	必选	String	身高
        weight: "", //	必选	String	体重
        ifAllergy: 1, //	必选	Integer	是否过敏1:无2:过敏
        allergy: "", //	必选	String	过敏内容
        ifPast: 1, //	必选	Integer	有无既往史1:无2:有
        ifSurgery: 1, //	必选	Integer	有无手术史1:无2:有
        patientId: "",
        surgery: "", //手术史内容
        past: "", //既往史内容
        sourceHospital: "", //来源医院
      },
      btndisable: false,
      Diseasequery: {},
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  onLoad(options) {
    this._getAllHospital();
    this.Patientquery.patientId = options.patientId;
    if (options.patientId) {
      this._getOnePatient(options.patientId);
      uni.setNavigationBarTitle({
        title: "修改患者信息",
      });
    } else {
      uni.setNavigationBarTitle({
        title: "添加患者",
      });
    }
    if (options.Diseasequery) {
      this.Diseasequery = JSON.parse(decodeURIComponent(options.Diseasequery));
    }
  },

  filters: {
    toTwo(value) {
      const a = Number(value);
      const val = a.toFixed(2);
      return val;
    },
  },
  methods: {
    confirm(e) {
      this.show = false;
      console.log(e);
      this.Patientquery.sourceHospital = e.value[0];
    },
    cancel() {
      this.show = false;
    },

    // 获取来源医院
    async _getAllHospital() {
      const res = await getAllHospital();
      const arr = res.data;
      const newArr = [];
      arr.forEach((item) => {
        newArr.push(item.name);
      });
      this.columns[0] = newArr;
      console.log("777777", this.columns);
    },

    // 111
    IDcardblur(e) {
      console.log(e.detail.value);
      if (!idCardReg.test(e.detail.value)) {
        this.Patientquery.birthday = "";
        this.sex = "";
        this.Patientquery.gender = "";
        return this.$toast("请输入正确的身份证号");
      }
      this.Patientquery.birthday = this.IdCard(e.detail.value, 1);
      this.sex = this.IdCard(e.detail.value, 2);
      this.Patientquery.gender = this.sextonum(this.sex);
    },
    _getOnePatient(patientId) {
      getOnePatient({
        patientId: patientId,
      }).then((res) => {
        this.Patientquery = res.data;
        this.sex = this.numtosex(this.Patientquery.gender);
        this.addresstocity(this.Patientquery.area);
      });
    },
    addresstocity(val) {
      let address = val.split("-");
      this.orderquery = {
        province: address[0],
        city: address[1],
        county: address[2],
      };
    },
    sextonum(val) {
      let sex = "";
      if (val == "男") {
        sex = 1;
      }
      if (val == "女") {
        sex = 2;
      }
      return sex;
    },
    numtosex(val) {
      let sex = "";
      if (val == 1) {
        sex = "男";
      }
      if (val == 2) {
        sex = "女";
      }
      return sex;
    },
    //取消
    patientcancel() {
      uni.navigateBack({
        delta: 1,
      });
    },
    //保存
    Hometreatment() {
      console.log(this.Patientquery);
      let obj = this.Patientquery;
      if (!obj.name) {
        return this.$toast("请输入患者姓名");
      }
      if (!obj.idCardNumber) {
        return this.$toast("请输入身份证号");
      }
      if (!idCardReg.test(obj.idCardNumber)) {
        return this.$toast("请输入正确的身份证号");
      }
      if (this.Diseasequery.category == 2 && !obj.latitude) {
        return this.$toast("请选择定位");
      }
      if (this.Diseasequery.category == 2 && !obj.address) {
        return this.$toast("请填写详细地址");
      }
      // if (obj.ifAllergy == 2 && !obj.allergy) {
      // 	this.$toast("请完善过敏信息");
      // 	return;
      // }
      if (!obj.phone) {
        return this.$toast("请输入手机号");
      }
      if (!mobileReg.test(obj.phone)) {
        return this.$toast("请输入正确的手机号");
      }
      if (this.btndisable) return;
      this.btndisable = true;
      if (this.Patientquery.patientId) {
        //修改
        updatePatient(this.Patientquery).then((res) => {
          this.btndisable = false;
          if (res.code == 200) {
            this.$store.state.chronic.patientId = this.Patientquery.patientId;
            uni.navigateBack({
              delta: 1,
            });
          }
        });
      } else {
        //新增
        uni.showLoading({
          mask: true,
        });
        addPatient(this.Patientquery).then((res) => {
          uni.hideLoading();
          this.btndisable = false;
          if (res.code == 200) {
            console.log(res);
            this.$store.state.chronic.patientId = res.data.patientId;
            uni.navigateBack({
              delta: 1,
            });
          }
        });
      }
    },
    // 获取地图
    getMap() {
      uni.chooseLocation({
        longitude: this.longitude,
        latitude: this.latitude,
        success: (res) => {
          console.log("位置名称：" + res.name);
          console.log("详细地址：" + res.address);
          console.log("纬度：" + res.latitude);
          console.log("经度：" + res.longitude);
          this.Patientquery.address = res.address;
          this.Patientquery.longitude = res.longitude;
          this.Patientquery.latitude = res.latitude;
        },
        fail: (err) => {
          console.log(err);
          this.$toast(err);
          if (err.errMsg == "chooseLocation:fail auth deny") {
            this.$toast("在右上角打开设置，允许定位");
            return;
          }
        },
      });
    },
    PasthistoryhaveClick(e) {
      if (e == 1) {
        //过敏史
        if (this.Patientquery.ifAllergy == 1) {
          this.Patientquery.ifAllergy = 2;
          return;
        }
        if (this.Patientquery.ifAllergy == 2) {
          this.Patientquery.ifAllergy = 1;
          this.Patientquery.allergy = "";
          return;
        }
      }
      if (e == 2) {
        //既往史
        if (this.Patientquery.ifPast == 1) {
          this.Patientquery.ifPast = 2;
          return;
        }
        if (this.Patientquery.ifPast == 2) {
          this.Patientquery.ifPast = 1;
          this.Patientquery.past = "";
          return;
        }
      }
      if (e == 3) {
        //手术史
        if (this.Patientquery.ifSurgery == 1) {
          this.Patientquery.ifSurgery = 2;
          return;
        }
        if (this.Patientquery.ifSurgery == 2) {
          this.Patientquery.ifSurgery = 1;
          this.Patientquery.surgery = "";
          return;
        }
      }
    },
    chooseaddress(e) {
      this.orderquery.province = e.value[0];
      this.orderquery.city = e.value[1];
      this.orderquery.county = e.value[2];
      this.Patientquery.area = e.value[0] + "-" + e.value[1] + "-" + e.value[2];
      console.log(e.value); //携带的参数
    },
    sexchoose(e) {
      console.log(e.detail.value);
      this.Patientquery.gender = Number(e.detail.value) + 1;
      this.sex = this.sexarray[e.detail.value];
    },
    //出生日期选择
    bindDateChange(e) {
      this.Patientquery.birthday = e.detail.value;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style lang="scss">
page {
  padding-bottom: 60rpx;
}

.des-box {
  // display: flex;
  display: block !important;
  height: 240rpx !important;

  .word {
    font-size: 32rpx;
    margin-bottom: 10rpx;
  }
}

.addcontent {
  padding: 0 40rpx;

  >view {
    border-bottom: 2rpx solid #f7f7f7;
    height: 104rpx;
    font-size: 32rpx;

    input {
      text-align: right;
      font-size: 28rpx;
      width: calc(90vw - 200rpx);
    }
  }

  .sexdown {
    image {
      width: 32rpx;
      height: 32rpx;
      margin-left: 8rpx;
      vertical-align: -8rpx;
    }
  }

  .mapdown {
    width: 60%;
    text-align: right;

    image {
      width: 48rpx;
      height: 48rpx;
      margin-left: 8rpx;
      vertical-align: -8rpx;
    }
  }

  .allergypadding {
    padding: 32rpx 0;
    height: 160rpx !important;
  }

  .allergy {
    display: flex;
    flex-direction: column;
    border-bottom: 2rpx solid #f7f7f7;
    height: 100rpx;

    .allergylheight {
      line-height: 100rpx;
    }

    .allergy-right {
      display: flex;
      flex-direction: row;

      .chooseimg {
        image {
          width: 40rpx;
          height: 40rpx;
          margin-left: 60rpx;
          vertical-align: -8rpx;
          margin-right: 16rpx;
        }
      }
    }

    .allergy-bot {
      // height: 100rpx;
      // line-height: 100rpx;
    }

    input {
      text-align: left;
      margin-top: 20rpx;
    }
  }

  .history {
    .history-right {
      display: flex;
      flex-direction: row;

      .chooseimg {
        image {
          width: 40rpx;
          height: 40rpx;
          margin-left: 60rpx;
          vertical-align: -8rpx;
          margin-right: 16rpx;
        }
      }
    }
  }
}

.mybtn {
  padding: 0 40rpx;
  margin: 32rpx 0;
}
</style>